Created: 09/12/2010
By: Tolga Can
Email:
ftolgacan@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This theme is a fixed layout with two columns and full width. All of the information within the main content area is nested within a div with an id of "main". The general template structure is the same throughout the template. On the landing page there are two area which are slider area and the content area.
You can get sample codes from their html files in comment line
between <!-- slider --> .... <!-- / slider -->
If you would like to add/remove new slides to the home page slider use
these codes;
<li>
<!-- slide title -->
<h3>BUY NOW AND SAVE $100!</h3>
<!-- slide subtitle -->
<p class="subtitle">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. AENEAN COMMODO</p>
<!-- slide text -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#" class="next-slide">Next Slide</a></p>
<!-- slide button -->
<a href="#" class="button">BUY NOW</a>
</li>
Every rows has own background so you need to duplicate these codes for each row.
<div class="row">
content
</div>
you can place your contents for the boxes like;
<!-- first box -->
<div class="box first">
content
</div>
<!-- / first box -->
<!-- box -->
<div class="box">
content
</div>
<!--/ box -->
<!-- box -->
<div class="box">
content
</div>
<!--/ box -->
<div class="clear"></div>
If you would like to edit a specific section of the template, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
I.E.
If you would like to edit home page box title font size or color find
codes under "/*Headings*/ and /* Links */ comment and edit:
on style_cf.css
/* Headings */
h1,h2,h3,h4,h5,h6 {
letter-spacing:0px;
font-weight:normal;
position: relative;
font-family: 'Trebuchet MS', 'Arial', Helvetica, san-serif;
font-weight:normal;
color:#ffff00;
}/* Links */
a, a:link, a:active, a:visited {
color: #21587f;
text-decoration: none;
}
a:hover {
color: #3792d4;
}
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.
This theme imports these Javascript files.
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/aller.cufonfonts.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/script.js"></script>
1) jQuery http://jquery.com
jQuery is a Javascript library that greatly reduces the amount of code
that you must write.
2) jQuery Cycle - jQuery plugin http://malsup.com/jquery/cycle/
Cylcle script on sliding gallery
4) script.js - Coded by Tolga Can
Includes several functions
5) jQuery Easing - jQuery plugin
http://gsgd.co.uk/sandbox/jquery.easing.php
Offers multiple easing options
6) Cufon
http://wiki.github.com/sorccu/cufon/about
jQuery UI JavaScript Library
7) jQuery Twitter Plugin
http://tweet.seaofclouds.com
The main page
and product list page slider effects
If you want to change effect of the slider you can follow this link and
choose an effect as you like;
After that open js/script.js and chage fx values of codes;
//Slider
$('#slides').cycle({
fx: 'scrollUp',
speed: 900,
easing: 'backout',
timeout: 10000,
next: '.next-slide'
});
C1) CUFON FONTS - top
I've used cufon text replacement plugin for all headings (h1,h2,h3,h4,h5,h6), you can find detailed information about Cufon by following this url http://wiki.github.com/sorccu/cufon/about
C1.1) Use your own fonts
If you want to use your own font for the headings you need
generate a js file using the Cufonts font generator;
http://cufon.shoqolate.com/generate/
After generated your fonts for Cufon, just replace with the old one js/aller.cufonfonts.js
C1.2) Disabling Cufon
If you would like to disable Cufon
please open the script.js and remove these lines ;
//cufon fonts
$(document).ready(function(){
Cufon.replace('h1,h2,h3,h4,h5,h6', {hover: true});
});
Or add your fileds to replace;
//cufon fonts
$(document).ready(function(){
Cufon.replace('h1,h2,h3,h4,h5,h6,#my_css_id', {hover: true});
});
There are three psd files for all the template and you can find them in the psd_files folder. All elemens has been layered like header, footer, button and background. If you would like to customize your template, just dublicate the elements in a new psd file, crop it and save the same name with the orginal file.
I've used the following images, icons or other files as listed.
If you'd like to know how i've created the box image on the top of the template, i've used the Smart 3D Package Box and it can be purchased at this link http://graphicriver.net/item/smart-3d-package-box/92367
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Tolga Can